	<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-box">
      <uni-icons type="search" size="18" color="#999"></uni-icons>
      <input 
        class="search-input" 
        placeholder="搜索列表内容" 
        placeholder-class="placeholder"
        v-model="searchText"
        @input="filterList"
      />
    </view>

    <!-- 列表区域 -->
    <scroll-view 
      class="list-scroll" 
      scroll-y 
      :scroll-top="scrollTop"
      @scrolltolower="loadMore"
    >
      <!-- 列表项 -->
      <view 
        v-for="(item, index) in filteredList" 
        :key="item.uid"
        class="list-item"
        @click="navigateToDetail(item)"
      >
        <image class="item-image" :src="item.avatar" mode="aspectFill"></image>
        <view class="item-content">
          <text class="item-title">{{ item.nickname }}</text>
          <text class="item-desc">{{ item.phone }}</text>
          <view class="item-footer">
            <text class="item-time">{{ item.createTime }}</text>
            <uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 加载更多提示 -->
      <view class="load-more">
        <text v-if="loading">加载中...</text>
        <text v-else-if="noMoreData">没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
	import {mapGetters} from "vuex";
	import { getSpreadUserList } from '../../../api/user'
export default {
   computed: mapGetters(['uid']),
  data() {
    return {
      searchText: '',
      originalList: [],      // 原始数据
      filteredList: [],      // 过滤后的数据
      scrollTop: 0,
      loading: false,
      page: 1,
      pageSize: 10,
      noMoreData: false
    }
  },
  mounted() {
    this.fetchListData()
  },
  methods: {
    // 获取列表数据（模拟）
    fetchListData() {
      // 模拟网络请求
      setTimeout(() => {
        // 模拟数据
        // const newData = Array.from({ length: this.pageSize }, (_, i) => ({
        //   id: Date.now() + i,
        //   title: `列表项 ${(this.page - 1) * this.pageSize + i + 1}`,
        //   description: '这是一个列表项的描述内容，可以显示多行文本信息',
        //   time: '2023-06-15',
        //   image: '/static/logo.png' // 实际项目中替换为真实图片路径
        // }))
		getSpreadUserList(this.uid, {page: this.page, limit: 20}).then(res => {
			if (this.page === 1) {
			  this.originalList = res.data.list
			} else {
			  this.originalList = [...this.originalList, ...res.data.list]
			}
			this.filteredList = [...this.originalList]
			this.loading = false
		
		})
        
    
        
       
      }, 800)
    },
    
    // 过滤列表
    filterList() {
      if (!this.searchText) {
        this.filteredList = [...this.originalList]
        return
      }
      
      this.filteredList = this.originalList.filter(item => 
        item.nickname.includes(this.searchText) || 
        item.phone.includes(this.searchText)
      )
    },
    
    // 加载更多
    loadMore() {
      if (this.loading || this.noMoreData) return
      
      this.loading = true
      this.page += 1
      this.fetchListData()
    },
    
    // 跳转到详情页
    navigateToDetail(item) {
      // uni.navigateTo({
      //   url: `/pages/users/app_allocation_user/index?uid=${item.uid}`
      // })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

.assign-btn {
  margin-left: 15px;
  padding: 6px 12px;
  background-color: #ff0000;
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  height: auto;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-box {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.search-input {
  flex: 1;
  height: 36px;
  background-color: #f5f5f5;
  border-radius: 18px;
  padding: 0 15px 0 30px;
  margin-left: -25px;
  font-size: 14px;
}

.placeholder {
  color: #999;
}

.list-scroll {
  flex: 1;
  height: 1px; /* 解决scroll-view高度问题 */
}

.list-item {
  display: flex;
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.item-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 12px;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.item-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.item-time {
  font-size: 12px;
  color: #999;
}

.load-more {
  text-align: center;
  padding: 15px;
  color: #999;
  font-size: 14px;
}
</style>